<template>
  <div class="content-box">
    <div class="item" v-for="(section, idx) in runData" :key="idx">
      <div v-for="(row, rowIdx) in section" :key="rowIdx" class="row">
        <span v-for="(item, itemIndex) in row.split([':'])" :key="itemIndex">
          {{item}} {{itemIndex===0?'：':''}}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      runData: []
    }
  },
  methods: {
    getData() {
      const data = [
        [
          '电池:12.5V',
          '负载功率（W）:12.5W',
          '灯具名称:X1133',
          '灯杆直径:12.5cm',
          '备注:无',
        ],
        [
          '太阳能板功率（W）:32.5W',
          '设备位置:119.257648111917,32.61551812065972',
          '灯杆高度:1m',
          '灯杆材质:钢材'
        ]
      ]

      this.runData = data
    }
  },
  mounted() {
    this.getData()
  }
};
</script>

<style scoped lang="less">
.content-box {
  height: calc(100% - 60px);
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  background: url(../../../assets/image/lvneng/baseData/kuang.png) 0px 0px no-repeat;
  background-size: 100% 100%;
  margin: 35px 20px;
}

.item {
  margin: 10px 0;
  padding: 30px 60px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  .row {
    display: flex;
    font-size: 110%;
    line-height: 1.8;
  }
}
</style>
